// 文档管理通用样式
.document-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 84px);

  .document-header {
    margin-bottom: 20px;
    
    h2 {
      margin: 0 0 8px 0;
      color: #303133;
      font-size: 24px;
      font-weight: 600;
    }
    
    p {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #303133;
  }

  .upload-dragger {
    width: 100%;
    
    .el-upload-dragger {
      width: 100%;
      height: 180px;
      border: 2px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s;
      
      &:hover {
        border-color: #409eff;
      }
      
      .el-icon-upload {
        font-size: 67px;
        color: #c0c4cc;
        margin: 40px 0 16px;
        line-height: 50px;
      }
      
      .el-upload__text {
        color: #606266;
        font-size: 14px;
        text-align: center;
        
        em {
          color: #409eff;
          font-style: normal;
        }
      }
    }
    
    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 7px;
      text-align: center;
    }
  }

  .empty-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    color: #c0c4cc;
    
    i {
      font-size: 48px;
      margin-bottom: 16px;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
  }
}

// 隐私条款样式
.privacy-container {
  .markdown-content {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    
    pre {
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 14px;
      line-height: 1.6;
      color: #2c3e50;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}

// 操作指南样式
.instructions-container {
  .instructions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .instruction-card {
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .card-image {
      height: 160px;
      overflow: hidden;
      position: relative;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .no-image {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: #f5f7fa;
        color: #c0c4cc;
        font-size: 32px;
      }
    }
    
    .card-content {
      padding: 16px;
      
      .card-title {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        line-height: 1.4;
      }
      
      .card-desc {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: #606266;
        line-height: 1.5;
      }
      
      .card-meta {
        font-size: 12px;
        color: #909399;
        
        .create-time {
          display: flex;
          align-items: center;
          
          i {
            margin-right: 4px;
          }
        }
      }
    }
    
    .card-actions {
      padding: 12px 16px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      
      .el-button {
        padding: 4px 8px;
        font-size: 12px;
        
        &.danger-text {
          color: #f56c6c;
          
          &:hover {
            color: #f56c6c;
          }
        }
      }
    }
  }

  .image-uploader {
    .image-preview {
      position: relative;
      width: 120px;
      height: 120px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s;
        
        &:hover {
          opacity: 1;
        }
      }
    }
    
    .image-uploader-trigger {
      width: 120px;
      height: 120px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s;
      
      &:hover {
        border-color: #409eff;
      }
      
      i {
        font-size: 24px;
        color: #c0c4cc;
        margin-bottom: 8px;
      }
      
      .upload-text {
        font-size: 12px;
        color: #606266;
      }
    }
  }

  .instruction-detail {
    .detail-image {
      margin-bottom: 16px;
      
      img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        border-radius: 4px;
      }
    }
    
    .detail-title {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    .detail-content {
      margin-bottom: 16px;
      line-height: 1.6;
      color: #606266;
      white-space: pre-wrap;
    }
    
    .detail-meta {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 14px;
      color: #909399;
    }
  }
}

// 数据文档样式
.data-container {
  .upload-card, .list-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: #303133;
      
      .document-count {
        font-size: 14px;
        color: #909399;
        font-weight: normal;
      }
    }
  }

  .documents-list {
    min-height: 300px;
    
    .empty-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 300px;
      color: #c0c4cc;
      
      i {
        font-size: 48px;
        margin-bottom: 16px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }

  .documents-table {
    .filename-cell {
      display: flex;
      align-items: center;
      
      i {
        margin-right: 8px;
        color: #409eff;
      }
    }
    
    .danger-text {
      color: #f56c6c;
      
      &:hover {
        color: #f56c6c;
      }
    }
  }

  .upload-progress {
    margin-top: 16px;
    padding: 0 20px;
  }

  .document-detail {
    .detail-item {
      display: flex;
      margin-bottom: 16px;
      
      label {
        width: 100px;
        font-weight: 600;
        color: #303133;
      }
      
      span {
        color: #606266;
      }
    }
    
    .content-preview {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 12px;
      background-color: #f5f7fa;
      
      pre {
        margin: 0;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 12px;
        line-height: 1.4;
        color: #2c3e50;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .document-container {
    padding: 10px;
    
    .document-header h2 {
      font-size: 20px;
    }
  }

  .instructions-container {
    .instructions-grid {
      grid-template-columns: 1fr;
    }
  }

  .data-container {
    .documents-table {
      .el-table {
        font-size: 12px;
      }
    }
  }
}

// 动画效果
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s;
}

.slide-up-enter, .slide-up-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
